.window {
	$this: &;

	position: relative;
	display: flex;
	flex-flow: column nowrap;
	background-color: $window-bg-color;
	border-radius: $window-border-radius;
	box-shadow: $window-box-shadow;
	max-height: 100%;
	// Responsiveness
	width: 100%;
	overflow: hidden;

	@include media-breakpoint-up('md') {
		margin: $window-margin;
		max-height: calc(100% - #{$window-margin * 2});
	}

	&:focus {
		outline: none;
	}

	&--fullscreen {
		width: 100%;
		max-width: 100%;
		height: 100%;
		max-height: 100%;
		margin: 0;
		border-radius: 0;

		#{$this}__header {
			position: relative;
			padding: $spacing-scale-8 $spacing-scale-6;
			box-shadow: 0 2px 6px -1px rgba(0, 0, 0, .12);
			z-index: 1;
		}

		#{$this}__body {
			border-top: 0;
		}
	}

	&__header {
		position: relative;
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
		align-items: center;
		padding: $spacing-scale-6;

		&-icon {
			color: $color-primary;
			flex-shrink: 0;
		}

		&-title {
			display: block;
			white-space: nowrap;
			text-overflow: ellipsis;
			margin-right: auto;
			overflow: hidden;

			&:not(:first-child) {
				padding-left: $spacing-scale-6;
			}

			&--fullwidth {
				flex: 1;
			}
		}
	}

	&__btn-close {
		position: absolute;
		top: 50%;
		right: .4rem;
		transform: translateY(-50%);
	}

	&__body {
		flex: auto;
		overflow: auto;
		border-top: 1px solid $border-color;
		border-bottom: 1px solid $border-color;

		&--painted {
			background-color: $window-body-painted-bg-color;
		}
	}

	&__actions {
		display: flex;
		flex-flow: row nowrap;
		align-items: center;
		padding: $spacing-scale-6;

		&--align-left {
			justify-content: flex-start;
		}

		&--align-right {
			justify-content: flex-end;
		}

		&--align-center {
			justify-content: center;
		}

		& > *:not(:first-child) {
			margin-left: $spacing-scale-6;
		}
	}

	&-appear {
		transform: translate3d(0, -5rem, 0) !important;
		opacity: 0;

		&-active {
			transform: translate3d(0, 0, 0) !important;
			opacity: 1;
			transition: all .3s ease-out;
		}
	}

	&--fullscreen {
		&#{$this}-appear {
			transform: scale3d(.6, .6, 1) !important;
			opacity: 0;

			&-active {
				transform: scale3d(1, 1, 1) !important;
				opacity: 1;
				transition: all .3s ease;
			}
		}
	}

	&-exit {
		opacity: 1;

		&-active {
			opacity: 0;
			transition: all .3s ease-out;
		}
	}
}
